<template>
  <van-tabbar v-model="active" active-color="#fc6627" route>
    <van-tabbar-item icon="home-o" to="/">
      <span>首页</span>
      <template #icon="{active}">
        <Geekicon v-if="active" name="home-sel"></Geekicon>
        <Geekicon v-else name="home"></Geekicon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/question">
      <span>问答</span>
      <template #icon="{active}">
        <Geekicon v-if="active" name="qa-sel"></Geekicon>
        <Geekicon v-else name="qa"></Geekicon> </template
    ></van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/video">
      <span>视频</span>
      <template #icon="{active}">
        <Geekicon v-if="active" name="video-sel"></Geekicon>
        <Geekicon v-else name="video"></Geekicon> </template
    ></van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/user">
      <span>我的</span>
      <template #icon="{active}">
        <Geekicon v-if="active" name="mine-sel"></Geekicon>
        <Geekicon v-else name="mine"></Geekicon> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>
<script>
import Geekicon from './geek-icon.vue'
export default {
  name: 'AppTabbar',
  components: {
    Geekicon
  },
  data () {
    return {
      active: 0
    }
  }
}
</script>
<style scoped lang="less"></style>
